<template>
  <div class="text-white overflow-hidden px-[40px]">
    <div class="flex items-center justify-between">
      <RunningState :data="data.status" />
      <FaultStatistics :data="data.error" />
    </div>
    <DevicesList />
  </div>
</template>
<script setup lang="ts">
import RunningState from './components/RunningState.vue';
import FaultStatistics from './components/FaultStatistics.vue';
import DevicesList from './components/DevicesList.vue';
import { apiGetDeviceStatistic } from '@/http/api';
import { iDeviceStatistic } from '@/interface/iDeviceStatistic';
const data = ref<iDeviceStatistic>({
  type: [],
  status: {
    running: 0,
    offline: 0,
    idle: 0,
    error: 0
  },
  error: {
    warning: 0,
    normal: 0,
  },
});
const getData = async () => {
  try {
    const res = await apiGetDeviceStatistic();

    data.value = res.data;
  } catch (error) {}
};
onMounted(() => {
  getData();
});
</script>
<style lang="scss" scoped></style>
